﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage1.master" AutoEventWireup="true" CodeFile="comment.aspx.cs" Inherits="comment" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

<title>江城影世界</title>

<script type= "text/javascript">
$(document).ready(function(){
	

});
</script>

<script type="text/javascript">
	  $(function() {
		var ticker = $("#ticker");
		ticker.children().filter("li").each(function() {
		  
		  var li = $(this),
		    container = $("<div>");
		  
		  li.next().appendTo(container);
		  li.prependTo(container);
		  
		  container.appendTo(ticker);
		});
		ticker.css("overflow", "hidden");
		function animator(currentItem) {
		  var distance = currentItem.height();
			duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.025;
		  currentItem.animate({ marginTop: -distance }, duration, "linear", function() {
			currentItem.appendTo(currentItem.parent()).css("marginTop", 0);
			animator(currentItem.parent().children(":first"));
		  }); 
		};
		animator(ticker.children(":first"));
		ticker.mouseenter(function() {
		  ticker.children().stop();
		  
		});
		ticker.mouseleave(function() {
		  animator(ticker.children(":first"));
		  
		});
	  });
    </script>



    <style type="text/css">
/*====================*/
/*=== Body Styles ===*/
/*====================*/
#content{
width:620px;
height:990px;
border:solid 1px #9a7bf3;
margin-left:160px;
background-color:#fff;
}
#lcontent{
width:620px;
height:930px;
border-right:solid 1px #9a7bf3;
}
#rcontent{
position:relative;
top:-930px;
left:638px;
width:320px;
height:930px;
border:solid 1px #9a7bf3;
background-color:#fff;
}
#comment{
height:280px;
border-bottom:dashed 2px lightblue;
}
#comment img{
margin:24px 0 0 24px;
border:solid 1px lightblue;
}
#comment #buy{
position:left top;
width:100px;
heigh:40px;
padding:0;
border:none;
}
#comment p{
position:relative;
top:-240px;
left:200px;
margin:18px 0 0 24px;
}
#buy p{
margin-top:95px;
marging-left:24px;
text-align:center;
width:90px;
height:30px;
background:url(images/buy.png) no-repeat;
background-position:0 0;
background-size:90px 60px;
}
#buy p:hover{
background-position:0 -30px;
}
.man img{
width:50px;
height:50px;
}
.man_comment ul li{
float:left;
width:150px;
list-style-type:none;
}
.man img{
position:relative;
top:0;
left:520px;
}
.man_comment{
position:relative;
top:-60px;
left:24px;
}
.comment_i{
margin-top:24px;
width:620px;
height:181px;
border-bottom:dashed 1px lightblue;
}
.micro_man img{
width:30px;
height:30px;
margin-left:12px;
margin-top:12px;
}
.micro_comment p{
position:relative;
top:-30px;
left:30px;
width:220px;
height:130px;
margin-left:24px;
}
.micro_comment li{
list-style-type:none;
}
.micro_comment{
width:320px;
height:149px;
border-bottom:dashed 1px lightblue;
}
#page{
position:relative;
top:-960px;
left:440px;	
}
#page li{
float:left;
width:19px;
height:25px;
padding-left:5px;
list-style-type:none;
}
#page li a{
color:#2b2b2b;
}
#last li{
width:19px;
height:20px;
margin-top:5px;
background:url(images/last.png) no-repeat;
background-position:0 0;
background-size:20px 40px;
}
#last li:hover{
background-position:0 -20px;
}
#next li{
width:19px;
height:20px;
margin-top:5px;
background:url(images/next.png) no-repeat;
background-position:0 0;
background-size:20px 40px;
}
#next li:hover{
background-position:0 -20px;
}
</style>



</asp:Content>




<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">




 <div id="content">
    	<img src="images/comment_ban.png"></img>
    	<div id="lcontent">
        	<div id="comment">
            	<a href=""><img src="images/maidou.jpg"></img></a>
                <p>影评题目:<a href=""></a></p>
                <p>影评作者:<a href=""></a></p>
                <p>简介：</p>
                <div id="buy">
                	<p><a href="">购&nbsp;&nbsp;&nbsp;&nbsp;票</a></p>
                </div>
            </div>
            <div id="comment_show">
            	<ul>
                	<div class="comment_i">
                		<div class="man" >
            				<li><a href=""><img src="images/man.gif"></img></a></li>
                    	</div>
                    	<div class="man_comment">
                        	<ul>
                        		<li><p>影评题目:<a href=""></a></p></li>
                            	<li><p>影评作者:<a href=""></a></p></li>
                            </ul>
                            <br/>
                            <p>影评内容</p>
                    	</div>
                    </div>
                    <div class="comment_i">
                		<div class="man" >
            				<li><a href=""><img src="images/man.gif"></img></a></li>
                    	</div>
                    	<div class="man_comment">
                        	<ul>
                        		<li><p>影评题目:<a href=""></a></p></li>
                            	<li><p>影评作者:<a href=""></a></p></li>
                            </ul>
                            <br/>
                            <p>影评内容</p>
                    	</div>
                    </div>
                    <div class="comment_i">
                		<div class="man" >
            				<li><a href=""><img src="images/man.gif"></img></a></li>
                    	</div>
                    	<div class="man_comment">
                        	<ul>
                        		<li><p>影评题目:<a href=""></a></p></li>
                            	<li><p>影评作者:<a href=""></a></p></li>
                            </ul>
                            <br/>
                            <p>影评内容</p>
                    	</div>
                    </div>
                </ul>
            </div>
        </div>
        <div id="rcontent">
        	<div id="tickerContainer">
            	<ul id="ticker">
                	<div class="micro_comment">
                		<div class="micro_man">
                    		<li><a href=""><img src="images/man.gif"></img></a></li>
                    	</div>
                		<p>评论内容：</p>
                    </div>
                    <div class="micro_comment">
                		<div class="micro_man">
                    		<li><a href=""><img src="images/man.gif"></img></a></li>
                    	</div>
                		<p>评论内容：</p>
                    </div>
                    <div class="micro_comment">
                		<div class="micro_man">
                    		<li><a href=""><img src="images/man.gif"></img></a></li>
                    	</div>
                		<p>评论内容：</p>
                    </div>
                    <div class="micro_comment">
                		<div class="micro_man">
                    		<li><a href=""><img src="images/man.gif"></img></a></li>
                    	</div>
                		<p>评论内容：</p>
                    </div>
                    <div class="micro_comment">
                		<div class="micro_man">
                    		<li><a href=""><img src="images/man.gif"></img></a></li>
                    	</div>
                		<p>评论内容：</p>
                    </div>
                    <div class="micro_comment">
                		<div class="micro_man">
                    		<li><a href=""><img src="images/man.gif"></img></a></li>
                    	</div>
                		<p>评论内容：</p>
                    </div>
                </ul>
            </div>
        </div>
        <div id="page">
        	<ul>
            	<div id="last">
            		<li><a href=""></a></li>
                </div>
                <li><a href="">1</a></li>
                <li><a href="">2</a></li>
                <li><a href="">3</a></li>
                <li><a href="">4</a></li>
                <li><a href="">5</a></li>
                <div id="next">
                	<li><a href=""></a></li>
                </div>
            </ul>
        </div>
    </div>
</asp:Content>

